<template>
  <van-pull-refresh
    v-model="isLoading"
    success-text="刷新成功"
    @refresh="onRefresh"
  >
    <div class="hot">
      <div class="hotop">
        <div class="hotopct">
          <div class="hoticon"></div>
          <div v-if="playList" class="hotime banner">
            更新日期:{{ playList.updateTime | formatDate }}
          </div>
        </div>
      </div>
      <ul class="newsong" v-if="hotSong.length > 0">
        <li v-for="(s, index) in hotSong" :key="s.id">
          <SongItem :item="s"
            ><span class="num">{{ (index + 1) | formatNum }}</span></SongItem
          >
        </li>
      </ul>
      <Loading v-if="isLoading"></Loading>
      <div class="loadingmore" ref="loadingmore" @click="loadMore" v-if="hasmore">加载更多...</div>
      <div class="nomore" v-if="!hasmore">已经到底啦...</div>
    </div>
  </van-pull-refresh>
</template>
<script>
import SongItem from "@/components/SongItem";
import Loading from "@/components/Loading";
import { Toast } from "vant";
export default {
  name: "Hot",
  // mounted(){
  //   let _this = this;
  //   this.time = setInterval(function(){
  //     var rect2 = _this.$refs.loadingmore.getBoundingClientRect();
  //     console.log(rect2.bottom);
  //     if(rect2.bottom-12<window.screen.height){
  //       _this.page++;
  //     if (_this.page >= 4) {
  //       _this.hasmore = false;
  //       clearInterval(_this.time)
  //       console.log(_this.time);
  //       return false;
  //     }
  //     _this.isLoading = true;
  //     _this.loadMusic();
  //     }
  //   },2000)

  // },
  data() {
    return {
      isLoading: false,
      hotSong: [],
      playList: null,
      page: 1,
      isLoading: true,
      hasmore: true,
    };
  },
  created() {
    this.loadMusic();
  },
  methods: {
    loadMusic() {
      //获取歌单详情
      this.$http
        .get("/playlist/detail?id=3778678")
        .then((data) => {
          this.isLoading = false;
          //把tracksID变成字符串
          let trackIDS = data.data.playlist.trackIds.slice(
            (this.page - 1) * 20,
            this.page * 20
          );
          this.playList = data.data.playlist;
          let ids = trackIDS.map((d) => {
            return d.id;
          });
          return ids.join(",");
        })
        .then((ids) => {
          //获取歌曲详情
          this.$http
            .get("/song/detail?ids=" + ids)
            .then((songData) => {
              let songDat = songData.data.songs.map((d) => {
                //处理数据和 SongItem不一致 转换数据
                d.song = {
                  artists: d.ar,
                };
                this.hotSong.push(d);
                return d;
              });
              // this.hotSong=songDat;
            });
        });

    },
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
    loadMore() {
      this.page++;
      if (this.page >= 4) {
        this.hasmore = false;
        return false;
      }
      this.isLoading = true;
      this.loadMusic();
    },
  },

  components: {
    SongItem,
    Loading,
  },
  filters: {
    formatDate(val) {
      let date = new Date(val);
      return date.getMonth() + 1 + "月" + date.getDate() + "日";
    },
    formatNum(val) {
      if (val < 10) {
        return "0" + val;
      } else {
        return val;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.hotop {
  position: relative;
  overflow: hidden;
  background: url(//s3.music.126.net/mobile-new/img/hot_music_bg_2x.jpg?f01a252…=);
  background-size: contain;
  .hoticon {
    margin: 31px;
    height: 67px;
    background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28…=) -24px -30px
      no-repeat;
    background-size: 166px 97px;
  }
  .hotime {
    margin-left: 30px;
    padding-top: 10px;
    color: white;
    font-size: 14px;
  }
}
.loadingmore {
  background-color: rgb(15,15,15);
  text-align: center;
  font-size: 14px;
  color: rgb(255, 208, 0);
}
.nomore {
  padding: 3px;
  text-align: center;
  font-size: 14px;
  color: rgb(255, 208, 0);
}
.num {
  padding: 0px 15px;
  font-size: 18px;
  color: rgb(255, 208, 0);
}
</style>
